import {Navigate, useRoutes} from 'react-router-dom';
import {lazy, Suspense} from "react";

const FunRoute = lazy(() => import("@/components/16- 路由/01- 基本知识/FunRoute.jsx"));
const FunRouteOne = lazy(() => import("@/components/16- 路由/01- 基本知识/FunRouteOne.jsx"));
const FunRouteTwo = lazy(() => import("@/components/16- 路由/01- 基本知识/FunRouteTwo.jsx"));
const FunRouteThree = lazy(() => import("@/components/16- 路由/01- 基本知识/FunRouteThree.jsx"));
const NotFount = lazy(() => import("@/components/16- 路由/01- 基本知识/NotFount.jsx"));

// import FunRoute from "@/components/16- 路由/01- 基本知识/FunRoute.jsx";
// import FunRouteOne from "@/components/16- 路由/01- 基本知识/FunRouteOne.jsx";
// import FunRouteTwo from "@/components/16- 路由/01- 基本知识/FunRouteTwo.jsx";
// import FunRouteThree from "@/components/16- 路由/01- 基本知识/FunRouteThree.jsx";
// import NotFount from "@/components/16- 路由/01- 基本知识/NotFount.jsx";

/**
 * 路由懒加载：
 *      依赖于 react包中的 lazy函数、Suspense组件
 *      使用Suspense 包裹路由组件，fallback属性，当懒加载的路由组件没有加载完成的时候，显示的内容
 * */

function load(Com) {
    return (
        <Suspense fallback={<div>组件正在加载中....</div>}>
            <Com/>
        </Suspense>
    )
}

/**
 * 根目录的index.js配置：
 *    <BrowserRouter>
 *         <App/>
 *     </BrowserRouter>
 * */
// 创建路由配置
const routes = [
    {
        index: true, // 重定向 等于 path:'/'
        element: <Navigate to='/home'/>
    },
    {
        path: '/home',
        element: load(FunRoute),
    },
    {
        path: '/one',
        element: load(FunRouteOne),
        children: [
            {
                path: 'team/:id', // 二级路由路径
                element: load(FunRouteTwo), // 渲染的组件
            },
        ],
    },
    {
        path: '/three',
        element: load(FunRouteThree),
    },
    {
        path: '*',
        element: load(NotFount),
    },
];
export default function () {
    return useRoutes(routes) // 调用useRoutes方法
}